<template>
  <div class="content-wrapper">
    <div class="content-container">
      <el-form :inline="true" :model="listQuery" class="filter-container">
        <el-form-item label="培训分类">
          <el-select v-model="listQuery.category" size="mini">
            <el-option
              v-for="item in categoryOptions"
              :key="item.key"
              :label="item.value"
              :value="item.key"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button
            class="filter-item"
            size="small"
            round
            type="primary"
            icon="el-icon-search"
            @click="getDataList"
          >
            搜索
          </el-button>
        </el-form-item>
      </el-form>
      <el-table
        v-if="col.length != 0"
        v-loading="listLoading"
        :data="dataList"
        row-key="id"
        align="left"
        highlight-current-row
        default-expand-all
      >
        <el-table-column
          v-for="(item, index) in col"
          :key="`col_${index}`"
          :prop="dropCol[index].prop"
          :label="item.label"
          :min-width="item.width"
        />
        <el-table-column
          label="操作"
          align="center"
          width="150px"
          fixed="right"
        >
          <template slot-scope="{ row }">
            <el-dropdown trigger="click" class="filter-item">
              <el-button type="text" class="el-icon-more" />
              <el-dropdown-menu slot="dropdown" class="user-dropdown">
                <el-dropdown-item
                  @click.native="Look(row)"
                >预览</el-dropdown-item>
                <el-dropdown-item
                  @click.native="StartTest(row)"
                >开始考试</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="total > 0"
        :total="total"
        :page-number.sync="listQuery.pageNumber"
        :page-size.sync="listQuery.pageSize"
        @pagination="getDataList"
      />
    </div>
    <el-dialog
      :visible.sync="dialogLook"
      width="70%"
      :before-close="handleClose"
    >
      <ViewFixedPaper :paper-data="paperData" />
    </el-dialog>
    <el-dialog
      :visible.sync="dialogStartTest"
      width="70%"
      style="margin-top: -8vh"
      :before-close="paperTopicHandleClose"
    >
      <PaperTopic
        ref="paperTopic"
        :paper-data="paperData"
        @dialogStartTest="closeDialogStartTest"
      />
    </el-dialog>
  </div>
</template>

<script>
import { preview, startExamination } from '@/api/ts/paper'
import ViewFixedPaper from '@/views/train/examination_list_paper/paperView/viewFixedPaper'
import Pagination from '@/components/Pagination'
import PaperTopic from '@/views/train/train_list_paper/paperTopic/index.vue'
import { pageByRel } from '@/api/ts/train.js'
import { outColumnDrop } from '@/views/train/js/answerSortable.js'
import col_dropCol from '@/views/train/js/answerSortable.js'
import { answer_formatter } from '@/views/train/js/formatter.js'
import { processTableTree } from '@/views/train/js/tabel_tree.js'

export default {
  components: {
    Pagination,
    PaperTopic,
    ViewFixedPaper
  },
  data() {
    return {
      dataList: [],
      total: 0,
      categoryOptions: [],
      typeOptions: [],
      listQuery: {
        pageNumber: 1,
        pageIndex: 0,
        pageSize: 10
        // category: null,
        // type: null,
        // content: null
      },
      listLoading: false,
      dialogStartTest: false,
      dialogLook: false,
      paperData: [],
      col: [],
      dropCol: [],
      sortable: ''
    }
  },
  mounted() {
    processTableTree().then((res) => {
      console.log(res, 'rr')
      this.categoryOptions = res.category
    })
    this.getDataList()
    this.col = col_dropCol.col
    this.dropCol = col_dropCol.dropCol
  },
  updated() {
    outColumnDrop(this.sortable)
  },
  methods: {
    closeDialogStartTest(val) {
      // 子传父，关闭组件
      console.log('父组件传过来的东西在此', val)
      this.dialogStartTest = val
    },
    handleClose(done) {
      this.dialogLook = false
    },
    paperTopicHandleClose(done) {
      this.$nextTick(() => {
        this.$refs.paperTopic.clearTimer()
      })

      this.$confirm('是否提前交卷', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then((_) => {
          this.dialogStartTest = false
          this.$refs.paperTopic.pushAnswer()
        })
        .catch((_) => {
          this.$refs.paperTopic.sendCode()
        })
    },
    handleFilter() {},
    getDataList() {
      this.listQuery.pageIndex = this.listQuery.pageNumber - 1
      pageByRel(this.listQuery).then((res) => {
        answer_formatter(res.data.rows)
        this.dataList = res.data.rows
        this.total = res.data.total
      })
    },
    StartTest(row) {
      var data = {
        examinationPaperId: row.examinationPaperId,
        type: 0
      }
      startExamination(data).then((res) => {
        this.paperData = res.data
        this.paperData.trainId = row.trainId
        this.dialogStartTest = true
      })
    },
    Look(row) {
      var data = {
        examinationPaperId: row.examinationPaperId,
        type: 0
      }
      preview(data).then((res) => {
        this.paperData = res.data
        this.paperData.trainId = this.trainId
        this.dialogLook = true
      })
    }
  }
}
</script>
<style scope>
.paper-topic-dialog >>> .el-dialog {
  overflow: hidden;
}
</style>
